<template>
    <section>
        <div class="movie-list-header">
            <h2 class="movie-list-title">
                {{ title }}
            </h2>
            <span class="more"><a :href="link">更多</a></span>
        </div>
        <Loading v-if="loading" :loadingOptions="loadingOptions"></Loading>
        <swiper v-else :options="swiperOption" ref="mySwiper">
            <swiper-slide v-for="movie in movieList" :key="movie.id">
                <a class="movie-item" :href="movie.alt">
                    <div>
                        <div class="movie-image">
                            <img :src="movie.images.small" :alt="movie.title">
                        </div>
                        <h3 class="movie-name">{{movie.title}}</h3>
                        <StarGrade :rating="movie.rating"></StarGrade>
                    </div>
                </a>
            </swiper-slide>
        </swiper>
    </section>
</template>

<style lang="scss" scoped>
    .movie-list-header {
        display: flex;
        padding: 15px 15px 15px 18px;

        .movie-list-title {
            flex-basis: 50%;
            font-size: 18px;
            font-weight: normal;
            margin: 0;
        }

        .more {
            flex-basis: 50%;
            font-size: 15px;
            color: #42bd56;
            text-align: right;
        }
    }

    .swiper-container {
        height: 200px;
        padding-left: 18px;
    }

    .swiper-slide {
        width: 100px;
        margin-right: 10px;
    }

    .movie-item {
        display: block;
        text-decoration: none;
        text-align: center;
        color: #000;

        >div {
            height: 200px;
            position: relative;
        }
    }

    .movie-image {
        height: 140px;
        width: 100px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .movie-name {
        font-size: 16px;
        text-align: center;
        margin: 10px auto 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: normal;
        width: 100px;
    }

</style>

<script>
    import 'swiper/dist/css/swiper.css';
    import {
        swiper,
        swiperSlide
    } from 'vue-awesome-swiper'
    import StarGrade from './StarGrade';
    import Loading from '../components/Loading';

    export default {
        components: {
            swiper,
            swiperSlide,
            StarGrade,
            Loading
        },
        data() {
            return {
                swiperOption: {
                    slidesPerView: 'auto'
                },
                rating: {},
                loadingOptions: {
                    containerWidth: '100%',
                    containerHeight: '200px',
                    loadingImgWidth: '60px',
                    loadingImgHeight: '60px'
                }
            }
        },
        props: {
            title: {
                type: String,
                required: true,
            },
            link: {
                type: String,
                required: true,
            },
            movieList: {
                type: Array,
                required: true
            },
            loading: {
                type: Boolean,
                default: true
            }
        }
    }

</script>
